<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
	<th:block th:include="include :: header('商品详情')" />
	<style type="text/css">
		.fixed-table-toolbar {
			display: none;
		}
	</style>
</head>

<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m-t" id="orderForm">
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab-goods-info" data-toggle="tab" aria-expanded="true">商品</a>
					</li>
					<li><a href="#tab-detail-info" data-toggle="tab" aria-expanded="false">详情</a></li>
					<li><a href="#tab-delivery-info" data-toggle="tab" aria-expanded="false">物流</a></li>
					<li><a href="#tab-market-info" data-toggle="tab" aria-expanded="false">营销</a></li>
					<li><a href="#tab-evaluate-info" data-toggle="tab" aria-expanded="false">评价</a></li>
				</ul>
				<input name="tableId" type="hidden" />
				<div class="tab-content">
					<div class="tab-pane active" id="tab-goods-info">
						<h4 class="form-header h4">商品信息</h4>
						<div class="row">
							<div class="col-sm-8">
								<div class="form-group">
									<label class="col-sm-2 control-label">商品名称：</label>
									<div class="form-control-static" th:text="${goods.goodsName}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">所属分类：</label>
									<div class="form-control-static" th:text="${goods.categoryName}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-8">
								<div class="form-group">
									<label class="col-sm-2 control-label">商品标题：</label>
									<div class="form-control-static" th:text="${goods.title}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">商品单位：</label>
									<div class="form-control-static" th:text="${goods.unit}">
									</div>
								</div>
							</div>

						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">所属店铺：</label>
									<div class="form-control-static" th:text="${goods.categoryName}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">所属品牌：</label>
									<div class="form-control-static">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">排序号：</label>
									<div class="form-control-static" th:text="${goods.sort}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">主题图：</label>
									<div class="col-sm-2">
										<div class="text-center">
											<img class="img-md"
												th:src="(${#strings.isEmpty(goods.image)}) ? @{/img/profile.jpg} : @{${goods.image}}">
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-8">
								<div class="form-group">
									<label class="col-sm-2 control-label">轮播图：</label> <input type="hidden" id="images"
										name="images">
									<div class="col-sm-2">
										<img class="img-md" th:src="@{/img/profile.jpg}">
									</div>
									<div class="col-sm-2">
										<img class="img-md" th:src="@{/img/profile.jpg}">
									</div>
									<div class="col-sm-2">
										<img class="img-md" th:src="@{/img/profile.jpg}">
									</div>
									<div class="col-sm-2">
										<img class="img-md" th:src="@{/img/profile.jpg}">
									</div>
								</div>
							</div>
						</div>
						<h4 class="form-header h4" th:if="${goods.specType} eq 1">规格信息</h4>
						<div class="row" th:if="${goods.specType} eq 1">
							<div class="col-sm-12">
								<table id="bootstrap-table"></table>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-detail-info">
						<div class="row">
							<div class="col-sm-offset-1 col-sm-10">
								<div class="">
									<p id="content"></p>
								</div>
							</div>
						</div>
					</div>
					<!-- 物流设置 -->
					<div class="tab-pane" id="tab-delivery-info">
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-3 control-label">配送方式：</label>
									<div class="col-sm-9">
										<div class="form-control-static"
											th:text="${@dict.getLabel('shop_delivery_type', goods.deliveryType)}">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-3 control-label">运费设置：</label>
									<div class="col-sm-9">
										<div class="form-control-static"
											th:text="${@dict.getLabel('shop_freight_type', goods.freightType)}">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row" th:if="${goods.freightType eq 1}">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-3 control-label">运费金额：</label>
									<div class="col-sm-9">
										<div class="form-control-static" th:text="${goods.freight}">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row" th:if="${goods.freightType eq 2}">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-3 control-label">模板列表：</label>
									<div class="col-sm-9">
										<div class="form-control-static" th:text="${freight.freightName}"
											th:each="freight : ${freights}"
											th:if="${freight.freightId eq goods.freightId}"> </div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<div class="tab-pane" id="tab-market-info">
						<div class="row">
							<div class="col-sm-3">
								<div class="form-group">
									<label class="col-sm-6 control-label">是否热卖：</label>
									<div class="col-sm-6">
										<div class="form-control-static"
											th:text="${@dict.getLabel('shop_yes_no', goods.isHot)}">
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label class="col-sm-6 control-label">是否新品：</label>
									<div class="col-sm-6">
										<div class="form-control-static"
											th:text="${@dict.getLabel('shop_yes_no', goods.isNew)}">
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="form-group">
									<label class="col-sm-6 control-label">是否精品：</label>
									<div class="col-sm-6">
										<div class="form-control-static"
											th:text="${@dict.getLabel('shop_yes_no', goods.isBest)}">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-evaluate-info">
						<div class="row">
							<div class="col-sm-12">
								<table id="evaluate-table"></table>
							</div>
						</div>
					</div>
				</div>
			</div>

		</form>
	</div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "shop/goods";
		var goodsId = [[${goods.goodsId}]];
		var specType = [[${goods.specType}]];
		var isExpress = [[${isExpress}]];
		var isStore = [[${isStore}]];
		var dataJson = [[${dataJson}]];
		var data = eval(dataJson);
		var evaluates = [[${@dict.getType('shop_evaluate_type')}]];
		var showStatus = [[${@dict.getType('sys_show_hide')}]];
		$(function () {
			var content = [[${goods.content}]];
			if ($.common.isNotEmpty(content)) {
				$("#content").html(content);
			}
			//多规格列表
			if (specType == 1) {
				specTable();
			}
			//评价列表
			evaluateTable();
		});
		function specTable() {
			var options = {
				data: data,
				pagination: false,
				columns: [
					{
						field: 'skuId',
						visible: false
					},
					{
						field: 'image',
						title: '图片',
						align: 'center',
						formatter: function (value, row, index) {
							return $.table.imageView(value);
						}
					},
					{
						field: 'skuName',
						align: 'center',
						title: '规格名称'
					},
					{
						field: 'price',
						align: 'center',
						title: '销售价'
					},
					{
						field: 'cost',
						align: 'center',
						title: '成本价'
					},
					{
						field: 'marketPrice',
						align: 'center',
						title: '市场价'
					},
					{
						field: 'barcode',
						align: 'center',
						title: '商品编号'
					},
					{
						field: 'stock',
						align: 'center',
						title: '库存数量'
					},
					{
						field: 'weight',
						align: 'center',
						title: '重量'
					},
					{
						field: 'volume',
						align: 'center',
						title: '体积'
					}]
			};
			$.table.init(options);
		}

		function evaluateTable() {
			var options = {
				id: 'evaluate-table',
				url: prefix + "/evaluate/" + goodsId,
				modalName: "商品评论",
				columns: [
					{
						field: 'loginName',
						title: '会员',
						align: 'center'
					},
					{
						field: 'evaluateType',
						title: '评价等级',
						align: 'center',
						formatter: function (value, item, index) {
							return $.table.selectDictLabel(evaluates, value);
						}
					},
					{
						field: 'star',
						title: '综合评分',
						align: 'center'
					},
					{
						field: 'createTime',
						title: '评价时间',
						align: 'center'
					},
					{
						field: 'content',
						title: '评价内容',
						align: 'center',
						formatter: function (value, row, index) {
							return $.table.tooltip(value);
						}
					},
					{
						field: 'replyContent',
						title: '回复内容',
						align: 'center',
						formatter: function (value, row, index) {
							return $.table.tooltip(value);
						}
					},
					{
						field: 'status',
						title: '显示状态',
						align: 'center',
						formatter: function (value, row, index) {
							return $.table.selectDictLabel(showStatus, value);
						}
					}]
			};
			$.table.init(options);
		}
	</script>
</body>

</html>